<template>
  <div class="top" style="width:100%">
    <div class="company">{{ item.name }}</div>
    <div class="mannergr">{{ item.manager }}</div>
    <div class="option">
      <el-dropdown @command="command">
        <span>操作<i class="el-icon-arrow-down el-icon--right" /></span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="add">添加子部门</el-dropdown-item>
            <el-dropdown-item v-if="!istop" command="look">查看部门</el-dropdown-item>
            <el-dropdown-item v-if="!istop" command="del">删除部门</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
// 点击删除按钮时删除当前的组织架构
// 删除弹出弹框提示用户，用户点击确定后调用接口删除数据并且刷新页面
<script>
import { companydepartmentDelete } from '@/api/deparments.js'
export default {
  props: {
    item: {
      //   顶部的弹出框没有id，手动给一个，目的：用于通知通知弹出框点击项的id
      type: Object,
      //   default: () => {
      //     return {}
      //   }
      default: () => ({})
    },
    istop: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    command(command) {
      console.log(command)
      switch (command) {
        case 'add':
          // 触发事件传值给add组件
        //   把点击的topInfo传给弹出框，通知弹框出我点击了哪一项
          this.$bus.$emit('addevent', true, this.item, 'add')
          break
        case 'look':
          // 修改结构信息
        //   1、点击打开编辑按钮，弹处新增按钮----编辑弹框与新增弹框是一样的
          this.$bus.$emit('addevent', true, this.item, 'look')
          // 2、打开弹框把当前的数据返回显示到弹框中
          // 1、如果当前点击项包含完整表单数据，直接赋值当前点击项数据
          // 2、如果当前点击项数据不完整包含表单数据（调用接口获取完整数据），直接赋值给当前啊表单
          //   3、表单验证是否需要调整
          //   验证表单精髓----一定要学会：因为新增表单和编辑表单都是同一个弹框组件，所以要区别用户到底点了新增按钮还是查看按钮
          //   所以在控制组件是否显示时也把需要显示的是谁，告诉弹框按钮，这样的话好在弹框中验证做出区别
          // 4、标题是否调整
          //   5、定义编辑api，导入api存储编辑后的结构信息

          break
        case 'del':
          // 提示用户是否确定删除此架构
          this.$confirm(`您确定要删除【${this.item.name}】吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(async() => {
            //   确定删除的逻辑
            // 调用api删除当前点击的结构
            await companydepartmentDelete(this.item.id)
            // 刷新父组件架构组织
            this.$emit('getData')
            // console.log(res)

            // 弹出弹框提示删除成功
            this.$message.success('删除成功')
          }).catch(() => {
            //   取消删除
          })

          break
      }
    }
  }

}
</script>

<style lang='scss' scoped>
  .top{
        display: flex;
        padding: 20px 60px 20px;
        .company{
            flex: 1;
            font-weight: 700;
        }
        .mannergr{
            margin-right: 20px;
        }
        .option{
            margin-right: 20px;
        }
    }
</style>
